<!--
 * @Description: 新建、编辑TCP Ping
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-09-28 14:59:18
 * @LastEditTime: 2021-11-11 16:21:51
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form ref="pingForm" :model="form" :rules="rules" label-width="80px" label-position="right">
      <!-- 源IP -->
      <el-form-item label="源IP" prop="srcIp">
        <el-input v-model="form.srcIp" placeholder="填写源IP" />
      </el-form-item>
      <!-- 源端口 -->
      <el-form-item label="源端口" prop="srcPort">
        <el-input v-model.number="form.srcPort" placeholder="请填写源端口" />
      </el-form-item>
      <!-- VRF -->
      <el-form-item label="VRF" prop="vrfName">
        <el-select v-model="form.vrfName" style="width:100%;" clearable>
          <el-option
            v-for="(item, index) in vrfList"
            :key="index"
            :value="item.name"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 目的IP -->
      <el-form-item label="目的IP" prop="destIp">
        <el-input v-model="form.destIp" placeholder="填写目的IP" />
      </el-form-item>
      <!-- 目的端口 -->
      <el-form-item label="目的端口" prop="destPort">
        <el-input v-model.number="form.destPort" placeholder="请填写目的端口" />
      </el-form-item>
      <!-- 次数 -->
      <el-form-item label="次数" prop="repeat">
        <el-input-number v-model="form.repeat" :min="1" :max="10"></el-input-number>
      </el-form-item>
      <!-- 间隔 -->
      <el-form-item label="间隔" prop="interval">
        <el-input-number v-model="form.interval" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;秒
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus', 'pingInfo', 'vrfList'],
  data () {
    return {
      dialogTitle: '新建TCP Ping配置',
      form: {
        id: null,
        srcIp: null,
        srcPort: null,
        vrfName: null,
        destIp: null,
        destPort: null,
        repeat: 1,
        interval: 1
      },
      rules: {
        srcIp: [{
          required: true,
          message: '请填写源IP',
          trigger: 'blur'
        }, {
          pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
          message: '格式不正确',
          trigger: 'blur'
        }],
        srcPort: [{
          type: 'number',
          required: true,
          message: '请填写源端口',
          trigger: 'blur'
        }, {
          type: 'number',
          min: 1025,
          max: 65535,
          message: '端口范围：1025-65535',
          trigger: 'blur'
        }],
        destIp: [{
          required: true,
          message: '请填写目的IP',
          trigger: 'blur'
        }, {
          pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
          message: '格式不正确',
          trigger: 'blur'
        }],
        destPort: [{
          type: 'number',
          required: true,
          message: '请填写目的端口',
          trigger: 'blur'
        }, {
          type: 'number',
          min: 1025,
          max: 65535,
          message: '端口范围：1025-65535',
          trigger: 'blur'
        }],
      }
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.dialogTitle = '新建TCP Ping配置';
          _this.form = {
            id: null,
            srcIp: null,
            srcPort: null,
            vrfName: null,
            destIp: null,
            destPort: null,
            repeat: 1,
            interval: 1
          };
        } else {
          _this.dialogTitle = '编辑TCP Ping配置';
          _this.form = _this.pingInfo;
        }
      }
    }
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$refs['pingForm'].resetFields();
      _this.$emit('handleDialog', false);
      _this.clearData();
      _this.$parent.refresh();
    },
    // 清空数据
    clearData () {
      let _this = this;
      _this.form = {
        id: null,
        srcIp: null,
        srcPort: null,
        vrfName: null,
        destIp: null,
        destPort: null,
        repeat: 1,
        interval: 1
      };
    },
    // 确认
    onSubmit () {
      let _this = this;
      _this.$refs['pingForm'].validate((valid) => {
        if (valid) {
          let params = {
            neId: _this.ne.id,
            dgId: _this.ne.dgId,
            srcIp: _this.form.srcIp,
            srcPort: _this.form.srcPort,
            vrfName: _this.form.vrfName,
            destIp: _this.form.destIp,
            destPort: _this.form.destPort,
            repeat: _this.form.repeat,
            interval: _this.form.interval
          };
          if (_this.form.id) {
            params.id = _this.form.id;
          }
          _this.$http.post({
            url: _this.form.id ? '/api/sdwan/sqa/test/tcp/update' : '/api/sdwan/sqa/test/tcp/create',
            data: params
          }).then(res => {
            let { status } = res;
            if (status === '0') {
              _this.$message.success(_this.form.id ? '更新成功！' : '创建成功！');
              _this.$emit('handleDialog', false);
              _this.clearData();
              _this.$parent.refresh();
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>